<template>
    <div class="advertising-card__wrap" v-if="show">
      <div :style="{width:width, height:height}">
        <div class="advertising-card__bored advertising-card__left">广告</div>

      <div class="advertising-card__bored advertising-card__right" @click="handlevanish">
        <yun-icon name="close1" style="font-size: 10px"></yun-icon>
      </div>
      <a href="">
        <img style="width: 100%;height: 100%" :src="src" alt="">
      </a>
      </div>

    </div>
</template>

<script>
    export default {
      name: "advertisingCard",
      props: {
        width: Number,
        height:Number,
      },
      methods:{
        handlevanish(){
          this.show=false;
        }
      },
      data(){
        return{
          show:true,
          src:'https://s2.ax1x.com/2020/01/13/lHpvY4.png'
        }
      }
    }

</script>

<style lang="scss">
  .advertising-card__wrap{
    position: relative;
    .advertising-card__left{
      position: absolute;
      bottom: 8*$length;
      left: 8*$length;
      font-size: 10*$length;
      line-height: 20*$length;
    }
    .advertising-card__right{
      position: absolute;
      top: 8*$length;
      right: 8*$length;
    }
    .advertising-card__bored{
      width: 40*$length;
      height: 20*$length;
      background-color: #707070;
      @include border-radius(5*$length);
      color: white;
    }


  }

</style>
